import React, {useState} from 'react';
import {Breadcrumb} from 'antd';
import SCharts from '../../components/Schart';
import IconFont from '../../components/IconFont';
import options from "./options";
import styles from './index.module.css'

const Charts = () => {

    const [state,setState] = useState(options)

    return (
        <div>
            <div className="crumbs">
                <Breadcrumb separator="/">
                    <Breadcrumb.Item><IconFont type="anticon-lx-rank" /> schart图表</Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className="container">
                <div className="plugins-tips">
                    schart.js：基于HTML5 Canvas的小图表库。
                    访问地址：<a href="https://github.com/lin-xin/sChart.js" target="_blank" rel="noopener noreferrer">schart.js</a>
                </div>
                <div style={styles.schartBox}>
                    <div style={styles.title}>柱状图</div>
                    <SCharts canvasId="bar" options={state.options1} />
                </div>
                <div style={styles.schartBox}>
                    <div style={styles.title}>折线图</div>
                    <SCharts canvasId="line" options={state.options2} />
                </div>
                <div style={styles.schartBox}>
                    <div style={styles.title}>饼状图</div>
                    <SCharts canvasId="pie" options={state.options3} />
                </div>
                <div style={styles.schartBox}>
                    <div style={styles.title}>环形图</div>
                    <SCharts canvasId="ring" options={state.options4} />
                </div>
            </div>
        </div>
    )
}

export default Charts;